<template>
	<view class="home-page">
		<u-navbar leftIconColor="#fff" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				收款帳戶
			</view>
		</u-navbar>
		<view class="head">
			<view class="head-left">
				<view class="head-title">
					添加養老保險<br>收款帳戶
				</view>
				<view class="head-text">
					用於接收每月養老金
				</view>
			</view>
			<image src="../../../static/home/receive-img.png" mode=""></image>
		</view>
		<view class="content">
			<view class="title">
				選擇家庭成員
			</view>
			<view class="item">
				<u-input placeholder="請選擇家庭成員" border="none" readonly v-model="member">
					<template slot="suffix">
						<image class="right-img" @click.stop="option_show = true"
							src="../../../static/insurance/insurance-dwon.png" mode=""></image>
					</template>
				</u-input>
			</view>
			<view class="title">
				收款銀行名稱
			</view>
			<view class="item">
				<u--input placeholder="請輸入收款銀行名稱" border="none" v-model="bank_name"></u--input>
			</view>
			<view class="title">
				收款銀行地址
			</view>
			<view class="item">
				<u--input placeholder="請輸入收款銀行地址" border="none" v-model="bank_address"></u--input>
			</view>
			<view class="title">
				收款銀行帳號
			</view>
			<view class="item">
				<u--input placeholder="請輸入收款銀行帳號" border="none" v-model="bank_num"></u--input>
			</view>
			<view class="title">
				再次確認收款銀行帳號
			</view>
			<view class="item">
				<u--input placeholder="請輸入收款銀行帳號" border="none" v-model="bank_next_num"></u--input>
			</view>
		</view>
		<view class="btn">
			<u-button @click="gobuy" color="linear-gradient( 159deg, #7DD5CC 0%, #45C5AA 100%)" type="primary"
				text="提交"></u-button>
		</view>
		<u-picker :show="option_show" keyName="name" :columns="list" @cancel="option_show = false"
			@confirm="modifyInfo"></u-picker>
		<u-popup :show="show" @close="close" mode="center" round="20">
			<view class="pop">
				<view>
					<view class="pop-title">
						請確認收款銀行資訊
					</view>
					<view class="pop-item">
						姓名：{{member}}
					</view>
					<view class="pop-item">
						收款銀行名稱：{{bank_name}}
					</view>
					<view class="pop-item">
						收款銀行地址：{{bank_address}}
					</view>
					<view class="pop-item">
						收款銀行帳號：{{bank_next_num}}
					</view>
				</view>
				<view class="pop-bottom">
					<view class="pop-btn new-btn" @click="quer">
						確認
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option_show: false,
				member: '',
				bank_name: '',
				bank_address: '',
				bank_num: '',
				bank_next_num: '',
				show: false,
				id: '',
				list: [
					[]
				]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			close(){
				this.show = false
			},
			modifyInfo(item) {
				console.log(item)
				if(item.value[0].accounts.length > 0){
					uni.showToast({
						title:'此成員已添加賬戶，如需修改請聯繫客服！',
						icon:'none'
					})
					return
				}
				this.member = item.value[0].name
				this.id = item.value[0].id
				this.option_show = false
			},
			getlist() {
				let params = {

				}
				this.$Request({
					method: 'GET',
					url: '/app-api/member/address/list',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						res.data.map(item => {
							this.list[0].push(item)
						})
						console.log(this.columns)
					}
				})
			},
			quer() {
				this.show = false
				let params = {
					"memberId": this.id,
					"bankName": this.bank_name,
					"bankAcount": this.bank_next_num,
					"bankAddress": this.bank_address,
				}
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/app-api/member/account/create',
					data: params,
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: '提交成功！',
							icon: 'none'
						})
						let app = this
						uni.showModal({
							title: '提示',
							confirmText:'確定',
							cancelText:'取消',
							content: '收款銀行提交成功，如需更改收款銀行信息，請聯繫客服專員為您進行更改。如需查看詳細信息請在賬戶列表點擊家庭成員頭像進行查看。',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									app.bank_name = ''
									app.bank_next_num = ''
									app.bank_address = ''
									app.bank_num = ''
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			gobuy() {
				if (this.member == '') {
					uni.showToast({
						title: '請選擇家庭成員',
						icon: 'none'
					})
					return
				}
				if (this.bank_name == '') {
					uni.showToast({
						title: '請輸入收款銀行名稱',
						icon: 'none'
					})
					return
				}
				if (this.bank_address == '') {
					uni.showToast({
						title: '請輸入收款銀行地址',
						icon: 'none'
					})
					return
				}
				if (this.bank_num != this.bank_next_num) {
					uni.showToast({
						title: '兩次銀行帳號不一致',
						icon: 'none'
					})
					return
				}

				this.show = true

			},
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.home-page {
		background-image: url('../../../static/real/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		min-height: 90vh;
		padding: 30rpx;
		position: relative;

		.pop {
			width: 520rpx;
			background: linear-gradient(180deg, #C9FFEF 0%, #FFFFFF 100%);
			padding: 30rpx;
			border-radius: 20rpx;
			text-align: center;

			.pop-title {
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			.pop-item {
				color: #333333;
				font-size: 28rpx;
				text-align: left;
				margin-top: 20rpx;

			}

			.pop-text {
				margin-top: 20rpx;
				color: #666666;
				font-size: 24rpx;
			}

			.pop-bottom {
				display: flex;
				justify-content: space-around;
				margin-top: 50rpx;

				.pop-btn {
					padding: 15rpx 65rpx;
					border-radius: 30rpx;
					background-color: #F9F9F9;
					color: #666666;
					font-size: 26rpx;
				}

				.new-btn {
					background-color: #18BE8C;
					color: #fff;
				}
			}
		}

		.nav-title {
			color: #fff;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.head-left {
				color: #FFFFFF;

				.head-title {
					font-size: 48rpx;
					font-weight: bold;
				}

				.head-text {
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}

			image {
				width: 298rpx;
				height: 298rpx;
			}
		}

		.content {
			width: 92%;
			position: absolute;
			top: 26%;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);
			margin: 0 auto;

			.title {
				margin-bottom: 20rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.item {
				margin-bottom: 20rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #F9F9F9;

				.right-img {
					width: 20.09rpx;
					height: 12.54rpx;
				}
			}
		}

		.btn {
			position: absolute;
			bottom: 4%;
			left: 0;
			right: 0;
			width: 92%;
			margin: 0 auto;
		}
	}
</style>